iT邦幫忙

2024 iThome 鐵人賽

DAY 7
0
Modern Web

GitHub Pages實作筆記系列 第 7

DAY7 目錄-4

  • 分享至 

  • xImage
  •  

昨天我們讓目錄選單左右移動,成功達到預期的效果,不過這時候發現,畫面好像變寬了?
https://ithelp.ithome.com.tw/upload/images/20240918/20169370YCmelVNEJL.png
如上圖所示,在目錄未被點擊時,選單會在視窗外,這時螢幕下方出現滾動條。
不過我希望當選單在視窗外時能夠隱藏起來,讓滾動條不要出現,這時候就會用到overflow
overflow可以控制當元素溢出時該怎麼做,設為hidden時,溢出的部分會被裁切。

將選單上層元素的overflow設為hidden。

. list-w{
  overflow: hidden;
}

最後測試一下,大功告成。

參考資料/延伸閱讀

  1. MDN-overflow

上一篇
DAY6 目錄-3
下一篇
DAY8 目錄-5
系列文
GitHub Pages實作筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言